﻿<DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
    <div class="example-box">
        <div>
            <div>Basic</div>
            <BitBreadcrumb TItem="BitBreadcrumbOption">
                <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" IsSelected />
            </BitBreadcrumb>
        </div>

        <div>
            <div>Disabled</div>
            <BitBreadcrumb TItem="BitBreadcrumbOption" IsEnabled="false">
                <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" IsSelected />
            </BitBreadcrumb>
        </div>

        <div>
            <div>Option Disabled</div>
            <BitBreadcrumb TItem="BitBreadcrumbOption">
                <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" IsEnabled="false" />
                <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" IsEnabled="false" />
                <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" IsSelected />
            </BitBreadcrumb>
        </div>
    </div>
</DemoExample>

<DemoExample Title="MaxDisplayedItems & OverflowIndex" RazorCode="@example2RazorCode" Id="example2">
    <div>
        You can specify how many options are displayed among the options you have and the rest of the options are displayed as overflow.
        You can also choose which index the overflow icon should be placed in.
    </div>
    <br /><br />
    <div class="example-box">
        <div>
            <div>Max displayed options (1)</div>
            <BitBreadcrumb TItem="BitBreadcrumbOption" MaxDisplayedItems="1">
                <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" IsSelected />
            </BitBreadcrumb>
        </div>
        <div>
            <div>Max displayed options (2)</div>
            <BitBreadcrumb TItem="BitBreadcrumbOption" MaxDisplayedItems="2">
                <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" IsSelected />
            </BitBreadcrumb>
        </div>
        <div>
            <div>Max displayed options (3)</div>
            <BitBreadcrumb TItem="BitBreadcrumbOption" MaxDisplayedItems="3">
                <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" IsSelected />
            </BitBreadcrumb>
        </div>
        <div>
            <div>Max displayed options (3), Overflow index (0)</div>
            <BitBreadcrumb TItem="BitBreadcrumbOption" MaxDisplayedItems="3" OverflowIndex="0">
                <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" IsSelected />
            </BitBreadcrumb>
        </div>
        <div>
            <div>Max displayed options (3), Overflow index (1)</div>
            <BitBreadcrumb TItem="BitBreadcrumbOption" MaxDisplayedItems="3" OverflowIndex="1">
                <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" IsSelected />
            </BitBreadcrumb>
        </div>
        <div>
            <div>Max displayed options (3), Overflow index (2)</div>
            <BitBreadcrumb TItem="BitBreadcrumbOption" MaxDisplayedItems="3" OverflowIndex="2">
                <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" IsSelected />
            </BitBreadcrumb>
        </div>
    </div>
</DemoExample>

<DemoExample Title="Icons" RazorCode="@example3RazorCode" Id="example3">
    <div>Customize the overflow icon, divider icon and item icons in BitBreadcrumb using different icon name values.</div>
    <br /><br />
    <div class="example-box">
        <div>
            <div>BitIconName (OverflowIcon: ChevronDown - DividerIcon: CaretRightSolid8)</div>
            <BitBreadcrumb TItem="BitBreadcrumbOption" MaxDisplayedItems="3" OverflowIndex="2" DividerIconName="@BitIconName.CaretRightSolid8" OverflowIconName="@BitIconName.ChevronDown">
                <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" IconName="@BitIconName.AdminELogoInverse32" />
                <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" IconName="@BitIconName.AppsContent" />
                <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" IconName="@BitIconName.AzureIcon" />
                <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" IconName="@BitIconName.ClassNotebookLogo16" IsSelected />
            </BitBreadcrumb>
        </div>
        <br />
        <div>
            <div>BitIconName (OverflowIcon: CollapseMenu) with active ReversedIcon</div>
            <BitBreadcrumb TItem="BitBreadcrumbOption" MaxDisplayedItems="3" OverflowIndex="2" OverflowIconName="@BitIconName.CollapseMenu" ReversedIcon>
                <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" IconName="@BitIconName.AdminELogoInverse32" />
                <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" IconName="@BitIconName.AppsContent" />
                <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" IconName="@BitIconName.AzureIcon" />
                <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" IconName="@BitIconName.ClassNotebookLogo16" IsSelected />
            </BitBreadcrumb>
        </div>
    </div>
</DemoExample>

<DemoExample Title="Templates" RazorCode="@example4RazorCode" Id="example4">
    <div>Here are some examples of customizing the breadcrumb content.</div>
    <br /><br />
    <div class="example-box">
        <div>
            <div>DividerIconTemplate</div>
            <BitBreadcrumb TItem="BitBreadcrumbOption">
                <DividerIconTemplate>
                    <BitIcon IconName="@BitIconName.CaretRightSolid8" Color="BitColor.Warning" />
                </DividerIconTemplate>
                <Options>
                    <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" />
                    <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" />
                    <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" />
                    <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" IsSelected />
                </Options>
            </BitBreadcrumb>
        </div>
        <br />
        <div>
            <div>ItemTemplate & OverflowTemplate</div>
            <BitBreadcrumb TItem="BitBreadcrumbOption" MaxDisplayedItems="3" OverflowIndex="2">
                <ItemTemplate Context="item">
                    <div style="font-weight: bold; color: #d13438; font-style:italic;">
                        @item.Text
                    </div>
                </ItemTemplate>
                <OverflowTemplate Context="item">
                    <div style="font-weight: bold; color: blueviolet; font-style:italic;">
                        @item.Text
                    </div>
                </OverflowTemplate>
                <Options>
                    <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" />
                    <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" />
                    <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" />
                    <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" IsSelected />
                </Options>
            </BitBreadcrumb>
        </div>
        <br />
        <div>
            <div>Item's template & Item's overflow tTemplate</div>
            <BitBreadcrumb TItem="BitBreadcrumbOption" SelectedItemClass="custom-selected-item">
                <Options>
                    <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb">
                        <Template Context="item"><div style="color:green">@item.Text</div></Template>
                        <OverflowTemplate Context="item"><div style="color:green;text-decoration:underline;">@item.Text</div></OverflowTemplate>
                    </BitBreadcrumbOption>
                    <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb">
                        <Template Context="item"><div style="color:yellow">@item.Text</div></Template>
                        <OverflowTemplate Context="item"><div style="color:yellow;text-decoration:underline;">@item.Text</div></OverflowTemplate>
                    </BitBreadcrumbOption>
                    <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb">
                        <Template Context="item"><div style="color:red">@item.Text</div></Template>
                        <OverflowTemplate Context="item"><div style="color:red;text-decoration:underline;">@item.Text</div></OverflowTemplate>
                    </BitBreadcrumbOption>
                    <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" IsSelected>
                        <Template Context="item"><div style="color:blue">@item.Text</div></Template>
                        <OverflowTemplate Context="item"><div style="color:blue;text-decoration:underline;">@item.Text</div></OverflowTemplate>
                    </BitBreadcrumbOption>
                </Options>
            </BitBreadcrumb>
        </div>
    </div>
</DemoExample>

<DemoExample Title="Events" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
    <div>By clicking on the options, the Selected option will change and match the SelectedItemStyle.</div>
    <br /><br />
    <div class="example-box">
        <BitBreadcrumb TItem="BitBreadcrumbOption" MaxDisplayedItems="3" OverflowIndex="2" Styles="@(new() { SelectedItem = "color: dodgerblue;", OverflowSelectedItem = "color: red;" })">
            <BitBreadcrumbOption Text="Option 1" IsSelected="@(SelectedOptionNumber == 1)" OnClick="() => SelectedOptionNumber = 1" />
            <BitBreadcrumbOption Text="Option 2" IsSelected="@(SelectedOptionNumber == 2)" OnClick="() => SelectedOptionNumber = 2" />
            <BitBreadcrumbOption Text="Option 3" IsSelected="@(SelectedOptionNumber == 3)" OnClick="() => SelectedOptionNumber = 3" />
            <BitBreadcrumbOption Text="Option 4" IsSelected="@(SelectedOptionNumber == 4)" OnClick="() => SelectedOptionNumber = 4" />
            <BitBreadcrumbOption Text="Option 5" IsSelected="@(SelectedOptionNumber == 5)" OnClick="() => SelectedOptionNumber = 5" />
            <BitBreadcrumbOption Text="Option 6" IsSelected="@(SelectedOptionNumber == 6)" OnClick="() => SelectedOptionNumber = 6" />
        </BitBreadcrumb>
    </div>
</DemoExample>

<DemoExample Title="Customizations" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
    <div>Explore advanced customization of BitBreadcrumb by adding or removing options dynamically and adjusting display settings.</div>
    <br />
    <div class="example-box">
        <div>
            <BitBreadcrumb TItem="BitBreadcrumbOption" MaxDisplayedItems="@MaxDisplayedItems" OverflowIndex="@OverflowIndex">
                @for (int i = 0; i < ItemsCount; i++)
                {
                    int index = i + 1;
                    <BitBreadcrumbOption Text="@($"Option {index}")"
                                         OnClick="() => CustomizedSelectedOptionNumber = index"
                                         IsSelected="@(CustomizedSelectedOptionNumber == index)" />
                }
            </BitBreadcrumb>
        </div>
        <div class="operators">
            <div>
                <BitButton OnClick="() => ItemsCount++">Add Option</BitButton>
                <BitButton OnClick="() => ItemsCount--">Remove Option</BitButton>
            </div>
            <br />
            <div>
                <BitNumberField @bind-Value="MaxDisplayedItems" Label="Max displayed options" ShowButtons />
                <BitNumberField @bind-Value="OverflowIndex" Label="Overflow index" ShowButtons />
            </div>
        </div>
    </div>
</DemoExample>

<DemoExample Title="Class & Style" RazorCode="@example7RazorCode" Id="example7">
    <div>Customize the appearance of BitBreadcrumb using styles and CSS classes.</div>
    <br /><br />
    <div class="example-box">
        <div>
            <div>Component's Style & Class:</div>
            <BitBreadcrumb TItem="BitBreadcrumbOption" Class="custom-class">
                <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" IsSelected />
            </BitBreadcrumb>
            <br />
            <BitBreadcrumb TItem="BitBreadcrumbOption" Style="font-style: italic;text-shadow: aqua 0 0 0.5rem;border-bottom: 1px solid aqua;">
                <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" IsSelected />
            </BitBreadcrumb>
        </div>
        <br />
        <div>
            <div>Option's Style & Class:</div>
            <BitBreadcrumb TItem="BitBreadcrumbOption">
                <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" Class="custom-item-1" />
                <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" Class="custom-item-2" />
                <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" Class="custom-item-1" />
                <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" Class="custom-item-2" IsSelected />
            </BitBreadcrumb>
            <br />
            <BitBreadcrumb TItem="BitBreadcrumbOption">
                <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" Style="color: dodgerblue; text-shadow: dodgerblue 0 0 1rem;" />
                <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" Style="color: aqua; text-shadow: aqua 0 0 1rem;" />
                <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" Style="color: dodgerblue; text-shadow: dodgerblue 0 0 1rem;" />
                <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" Style="color: aqua; text-shadow: aqua 0 0 1rem;" IsSelected />
            </BitBreadcrumb>
        </div>
        <br />
        <div>
            <div>Styles & Classes:</div>
            <BitBreadcrumb TItem="BitBreadcrumbOption" Classes="@(new() { Item = "custom-item", SelectedItem = "custom-selected-item" })">
                <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" IsSelected />
            </BitBreadcrumb>
            <br />
            <BitBreadcrumb TItem="BitBreadcrumbOption" Styles="@(new() { Item = "color: green;", SelectedItem = "color: lightseagreen; text-shadow: lightseagreen 0 0 1rem;" })">
                <BitBreadcrumbOption Text="Option 1" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 2" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 3" Href="/components/breadcrumb" />
                <BitBreadcrumbOption Text="Option 4" Href="/components/breadcrumb" IsSelected />
            </BitBreadcrumb>
        </div>
    </div>
</DemoExample>

<DemoExample Title="RTL" RazorCode="@example8RazorCode" Id="example8">
    <div>Use BitBreadcrumb in right-to-left (RTL).</div>
    <br />
    <div class="example-box">
        <BitBreadcrumb Dir="BitDir.Rtl" TItem="BitBreadcrumbOption" MaxDisplayedItems="3" OverflowIndex="2">
            <BitBreadcrumbOption Text="پوشه اول" />
            <BitBreadcrumbOption Text="پوشه دوم" IsSelected />
            <BitBreadcrumbOption Text="پوشه سوم" />
            <BitBreadcrumbOption Text="پوشه چهارم" />
            <BitBreadcrumbOption Text="پوشه پنجم" />
            <BitBreadcrumbOption Text="پوشه ششم" />
        </BitBreadcrumb>
    </div>
</DemoExample>